<template>
  <!-- :fullscreen="true" -->
  <j-modal
    :title="title"
    :width="700"
    :visible="visible"
    :maskClosable="false"
    :destroyOnClose="true"
    @close="close"
    cancelText="关闭"
    okText="保存"
  >
    <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
      <a-form-model ref="form" :rules="validatorRules" :model="model">
        <a-row :gutter="24">
          <a-col :sm="24" :md="12">
            <a-form-model-item label="模型名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="modelName">
              <a-input disabled v-model="model.modelName"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12">
            <a-form-model-item label="模型表名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="modelTableName">
              <a-input disabled v-model="model.modelTableName"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12">
            <a-form-model-item label="业务类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="modelType">
              <a-select disabled v-model="model.modelType">
                <a-select-option v-for="(item, index) in typeList" :key="index" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12">
            <a-form-model-item label="当前版本" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="version">
              <a-input disabled v-model="model.version"></a-input>
            </a-form-model-item>
          </a-col>
          <a-divider type="horizontal" dashed />

          <a-col :sm="24" :md="12">
            <a-form-model-item label="中文名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fieldNameZH">
              <a-input placeholder="请输入中文名称" v-model="model.fieldNameZH"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12">
            <a-form-model-item label="英文名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fieldNameEN">
              <a-input placeholder="请输入英文名称" :disabled="disableSubmit" v-model="model.fieldNameEN"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12">
            <a-form-model-item label="数据类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fieldType">
              <a-select placeholder="请选择数据类型" v-model="model.fieldType">
                <a-select-option v-for="(item, index) in datatypelist" :key="index" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12">
            <a-form-model-item label="值域" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fieldLength">
              <a-input placeholder="请输入值域" v-model="model.fieldLength"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="24">
            <a-form-model-item
              label="字段约束"
              :labelCol="labelColRow"
              :wrapperCol="wrapperColRow"
              prop="fieldConstraint"
            >
              <a-radio-group :options="fieldConstraintOpts" v-model="model.fieldConstraint" />
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12">
            <a-form-model-item label="约束/条件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fieldIsNull">
              <a-radio-group :options="fieldIsNullOpts" v-model="model.fieldIsNull" />
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12">
            <a-form-model-item label="最大出现次数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fieldMaxTimes">
              <a-select placeholder="请选择最大出现次数" v-model="model.fieldMaxTimes">
                <a-select-option v-for="(item, index) in fieldMaxTimeslist" :key="index" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12">
            <a-form-model-item
              label="外键关联模型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="associatedModel"
            >
              <a-select
                allowClear
                placeholder="请选择外键关联模型"
                v-model="model.associatedModel"
                @change="handleModelChange"
              >
                <a-select-option v-for="item in associatedModellist" :key="item.id" :value="item.id">
                  {{ item.modelName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="12">
            <a-form-model-item
              label="外键关联字段"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="associatedField"
            >
              <a-select allowClear placeholder="请选择外键关联字段" v-model="model.associatedField">
                <a-select-option v-for="item in associatedFieldlist" :key="item.id" :value="item.id">
                  {{ item.fieldNameZH }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="24">
            <a-form-model-item label="定义" :labelCol="labelColRow" :wrapperCol="wrapperColRow" prop="fieldDefine">
              <a-input :placeholder="disableSubmit ? '' : '请输入定义'" v-model="model.fieldDefine"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :sm="24" :md="24">
            <a-form-model-item label="备注" :labelCol="labelColRow" :wrapperCol="wrapperColRow" prop="remarks">
              <a-input :placeholder="disableSubmit ? '' : '请输入备注'" v-model="model.remarks"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </j-modal>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import { postAction } from '../../../../api/manage'
export default {
  name: 'SysPositionModal',
  components: {},
  props: ['nodeData', 'modelOpts'],
  data() {
    return {
      treeData: [],
      disableSubmit: false,
      title: '',
      visible: false,
      isCheck: false,
      url: {
        add: '/metaDataModel/addMetaDataField',
        edit: '/metaDataModel/updateMetaDataField',
        field: '/metaDataModel/metaDataFieldByModelId',
      },
      model: {
        ...this.nodeData,
        id: '',
      },
      validatorRules: {
        fieldNameZH: [{ required: true, message: '请输入中文名称' }],
        fieldNameEN: [{ required: true, message: '请输入英文名称' }],
        fieldType: [{ required: true, message: '请选择数据类型' }],
        fieldLength: [{ required: true, message: '请输入值域' }],
        // setTime: [{ required: true, message: '请选择!' }],
        // useTime: [{ required: true, message: '请选择!' }],
        // cate: [{ required: true, message: '请选择!' }],
      },
      typeList: [
        {
          value: 0,
          label: '主数据',
        },
        {
          value: 1,
          label: '业务数据',
        },
      ],
      datatypelist: [
        {
          value: 'char',
          label: 'char',
        },
        {
          value: 'decimal',
          label: 'decimal',
        },
        {
          value: 'double',
          label: 'double',
        },
        {
          value: 'float',
          label: 'float',
        },
        {
          value: 'date',
          label: 'date',
        },
        {
          value: 'timestamp',
          label: 'timestamp',
        },
      ],
      fieldConstraintOpts: [
        { label: '普通', value: 0 },
        { label: '主键', value: 1 },
        { label: '外键关联', value: 2 },
      ],
      fieldIsNullOpts: [
        { label: 'M必选', value: 0 },
        { label: 'O可选', value: 1 },
      ],
      fieldMaxTimeslist: [
        {
          value: 1,
          label: '1次',
        },
        {
          value: 2,
          label: '2次',
        },
        {
          value: 3,
          label: '3次',
        },
        {
          value: 4,
          label: 'N次',
        },
      ],
      associatedFieldlist: [],
      associatedModellist: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
      labelColRow: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperColRow: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
    }
  },
  created() {
    // this.loadTree()
    this.associatedModellist = this.modelOpts
  },
  watch: {
    visible: {
      handler(val) {
        console.log(this.modelOpts, '11')
        this.associatedModellist = this.modelOpts
      },
    },
  },
  mounted() {},
  methods: {
    add() {
      this.model = {
        ...this.nodeData,
        id: '',
      }
      // this.model = this.$options.data().model
      this.peopleList = []
      this.visible = true
    },
    // check(record) {
    //   this.model = Object.assign({}, record)
    //   if (this.model.cate) {
    //     this.model.cate = this.model.cate.split(',')
    //   }
    //   this.visible = true
    // },
    check(record) {
      // debugger
      this.model = {
        ...this.nodeData,
        ...record,
      }
      this.getFieldList(record.associatedModel)
      // this.model = {} Object.assign({}, record)
      this.visible = true
    },
    edit(record) {
      // debugger
      this.model = {
        ...this.nodeData,
        ...record,
      }
      this.getFieldList(record.associatedModel)
      // this.model = {} Object.assign({}, record)
      this.visible = true
    },
    httpRequest() {
      getAction(this.url.get, { id: this.model.id }).then((res) => {
        if (res.success) {
          this.model = res.result
        } else {
          console.log(res)
        }
      })
    },
    close(isSubmit) {
      if (isSubmit) {
        this.saveData()
      } else {
        this.visible = false
      }
    },
    handleModelChange(id) {
      // console.log(id, 'id')
      this.getFieldList(id)
    },
    async getFieldList(id) {
      const { result } = await getAction(this.url.field, { modelId: id })
      this.associatedFieldlist = result
    },
    saveData() {
      const data = {
        ...this.model,
        modelId: this.nodeData.id,
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          postAction(!this.model.id ? this.url.add : this.url.edit, data)
            .then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
                this.visible = false
              } else {
                this.$message.error(res.message)
              }
            })
            .finally(() => {})
        } else {
          return false
        }
      })
    },
    loadTree() {
      this.treeData = []
      getAction(this.url.tree, { type: 1 }).then((res) => {
        if (res.success) {
          // debugger
          this.treeData = res.result
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
// @import '../../css/checkAndEdit.less';

// .name-type {
//   width: 110px;
//   margin-left: 5px;
//   border: 1px solid #e0e0e0;

//   /deep/ .ant-select-selection {
//     box-sizing: border-box;
//     min-height: 27px !important;

//     .ant-select-selection__rendered {
//       line-height: 27px !important;
//     }
//   }
// }
// .value {
//   /deep/ .tox-tinymce {
//     height: 55vh !important;
//   }
// }
</style>
